<template>
    <div class="home-wrap" @click.stop="hideHistoryPanel">
        <div class="home-body">

            <Nav></Nav>

            <Logo></Logo>
            <Search></Search>

            <Quick></Quick>
            <Bookmark></Bookmark>

            <Foot></Foot>
        </div>
    </div>
</template>

<script>
    import {useStore} from "vuex";

    import Logo from '../default/Logo.vue';
    import Nav from '../default/Nav.vue';
    import Search from './Search.vue';
    import Quick from './Quick.vue';
    import Bookmark from './Bookmark.vue';
    import Foot from '../default/Foot.vue';

    export default {
        // 组件
        components: {
            Logo,
            Nav,
            Search,
            Quick,
            Bookmark,
            Foot,
        },
        // 数据
        data() {
            return {
                // 获取在 website.js 中的配置
                config: useStore().state.skin.listSkin,
                // vuex 状态
                store: useStore().state,
                // 书签
                bookmark: [],
            }
        },
        // DOM未渲染前调用
        created() {

        },
        // 方法
        methods: {
            // 打开设置面板
            settingPanel() {
                this.$store.commit('openSettingPanel');
            },
            // 关闭历史记录面板(设置default主题的历史面板隐藏)
            hideHistoryPanel() {
                let that = this,
                    skin = that.store.skin;
                skin.default.history.state = false;
                that.$store.commit('setSkin', skin);
            },
        },
    }
</script>

<style lang="less" scoped>
    @width: 1000px;
    @radius: 10px;

    .home-wrap {
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;

        .home-body {
            width: @width;
            margin: 0 auto;
        }
    }

    @media screen and (max-width: @width + 20px) {
        .home-wrap {
            .home-body {
                padding: 0 10px;
                width: 100% !important;
            }
        }
    }

    @media screen and (max-width: 768px) {
        .home-wrap {
            .home-body {

                .logo-wrap {
                    display: none;
                }

                .search-wrap {
                    margin-top: 20px;

                    .shadow-lg {
                        box-shadow: none;
                    }
                }
            }
        }
    }
</style>
